<template>
  <div style="min-width: 644px">
    <div class="listContant">
      <fks-query-page
        v-loading="loading"
        row-key="content.id"
        :page="false"
        :data="treeData"
        :tree-props="{ children: 'children' }"
        highlight-current-row
        :expand-row-keys="defaltExpand"
        :total="total"
        :element-loading-text="LANG.LOADING"
        :table-name="LANG.STM_PORTAL"
        @query="getData"
        @size-change="getData"
      >
        <template>
          <fks-table-column type="index" align="center" width="50" label="#" />
          <fks-table-column
            prop="name"
            :label="LANG.PORTAL_NAME"
            header-align="center"
            min-width="400"
            align="left"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.content.name }}</span>
            </template>
          </fks-table-column>
          <fks-table-column :label="LANG.TYPE" align="center" width="130">
            <template slot-scope="scope">
              {{ scope.row.content.type | transferEnum('portalType') }}
            </template>
          </fks-table-column>
          <fks-table-column :label="LANG.OPERATION" width="230" align="left">
            <template slot-scope="scope">
              <fks-button
                v-permission="['portal:addChild']"
                type="text"
                :disabled="
                  portalType.length &&
                  portalType.length > scope.row.content.type
                    ? false
                    : true
                "
                @click="addSubChildHandler(scope.row.content)"
              >
                {{ LANG.ADD_SUBPORTAL }}
              </fks-button>
              <fks-button
                v-permission="['portal:member']"
                type="text"
                @click.native="memberHandler(scope.row.content)"
              >
                {{ LANG.MEMBER }}
              </fks-button>
              <fks-button
                v-permission="['portal:edit']"
                type="text"
                @click.native="editHandler(scope.row.content)"
              >
                {{ LANG.EDIT }}
              </fks-button>
              <span v-permission="['portal:delete']" style="margin-left: 11px">
                <fks-button
                  v-if="scope.row.parentId != '0'"
                  danger-text
                  @click.native="delHandler(scope.row.content)"
                >
                  <span>{{ LANG.DELETE }}</span>
                </fks-button>
              </span>
            </template>
          </fks-table-column>
        </template>
      </fks-query-page>
    </div>
    <portal-info
      v-if="dialogVisible"
      :visible.sync="dialogVisible"
      :type="operate_type"
      :data="current_operate_node"
      @refresh="getData"
    />
    <member :data="current_operate_node" :visible.sync="memberVisible" />
  </div>
</template>
<script>
import * as portalApi from './api'
import Mix from '@/mixins/module'
import PortalInfo from './PortalInfo/index'
import Member from './Member/index'
export default {
  name: 'Portal',
  components: {
    PortalInfo,
    Member
  },
  mixins: [Mix],
  data() {
    return {
      loading: false,
      tableData: [],
      defaltExpand: ['1302785644422082562'],
      layout: 'total, sizes, prev, pager, next, jumper',
      pageSize: 15,
      currentPage: 1,
      total: 0,
      formData: {},
      formRules: {},
      FilterText: '',
      dialogVisible: false,
      transferDialog: false,
      memberVisible: false,
      dialogType: 'new',
      current_tree_node: '', //当前选中的节点
      current_tree_node_name: '', //当前选中的节点名称
      current_operate_node: '', //当前操作的节点id
      operate_type: '', //操作方式，有：新增，修改，删除
      treeData: [],
      order: ''
    }
  },
  computed: {
    portalType() {
      return this.$store.state.enum.portalType
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    //获取数据
    @permission('portal:query')
    getData(getTree) {
      this.loading = true
      portalApi
        .getPortals()
        .then((res) => {
          this.loading = false
          if (res.status) {
            this.treeData = res.data
            this.total = res.data.total
          }
        })
        .catch(() => {
          this.loading = false
          this.treeData = []
          this.total = 0
        })
    },
    //管理用户
    memberHandler(data) {
      this.memberVisible = true
      this.current_operate_node = data
    },
    //列表中修改按钮事件
    editHandler(data) {
      this.dialogVisible = true
      this.operate_type = 'update'
      this.current_operate_node = data
    },
    // 添加/树结构添加按钮事件
    addSubChildHandler(data) {
      this.operate_type = 'new'
      this.current_operate_node = data
      this.dialogVisible = true
    },
    // 删除按钮事件
    delHandler(data) {
      this.$confirm(this.LANG.DELETE_CONFIRM, this.LANG.TIPS, {
        title: this.LANG.TIPS,
        type: 'warning',
        confirmButtonText: this.LANG.DELETE,
        cancelButtonText: this.LANG.CANCEL,
        confirmButtonClass: 'fks-button--danger',
        deleteMode: true
      })
        .then(() => {
          portalApi
            .deletePortal(data.id)
            .then((res) => {
              if (res.status) {
                this.$message.success(this.LANG.DELETE_SUCCESS)
                //删除后刷新
                this.getData(true)
              }
            })
            .catch(() => {})
        })
        .catch(() => {})
    }
  }
}
</script>
<style lang="scss" scoped>
.page-box {
  position: fixed;
  z-index: 50;
  bottom: 0;
  right: 35px;
  width: 100%;
  background: #fff;

  > .fks-pagination {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
  }
}

.title {
  float: left;
  margin-top: 12px;
  font-weight: 600;
  font-size: 16px;
  line-height: 22px;
  color: rgba(57, 62, 69, 1);
  opacity: 1;
}

.buttonspan {
  font-weight: 400;
  font-size: 14px;
  font-family: Microsoft YaHei, sans-serif;
  line-height: 20px;
  color: rgba(73, 123, 183, 1);
  opacity: 1;
  cursor: pointer;
}

.listContant {
  display: inline-block;
  width: 100%;
  height: 100%;
}

.treeContant {
  display: inline-block;
  width: 336px;
  height: calc(100% - 96px);
  padding: 24px 16px;
  margin: 24px 0 24px 24px;
  border-width: 0;
  border-style: solid;
  font-weight: 400;
  font-size: 14px;
  vertical-align: top;
  color: rgba(57, 62, 69, 1);
  background-color: #f7f8f8;

  .portalpage-tree {
    height: 100%;
    background-color: #f7f8f8;

    .portalpage-tree-content {
      height: calc(100% - 120px);
      overflow: hidden !important;

      .scroll-wrapper {
        height: 100%;
        overflow: scroll;
      }

      .fks-tree-node {
        background-color: #f7f8f8;
      }

      .portalpage-tree-node {
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
        height: 100%;
      }
    }
  }

  .tree-title {
    font-weight: 600;
    font-size: 18px;
    line-height: 25px;
    color: rgba(13, 61, 139, 1);
    opacity: 1;
  }

  .tree-titleIcon {
    position: relative;
    left: 236px;
    display: inline-block;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(55, 124, 237, 0.1);
    opacity: 1;
    cursor: pointer;

    font {
      margin: 0 0 0 8px;
      font-size: 20px;
      color: #377ced;
    }
  }
}
</style>